<template>
  <div v-loading="loading">
    <el-row :gutter="10">
      <!-- 左上角：基本信息 -->
      <el-col :span="24" class="detail-info-item">
        <UserBasicInfo :user="user">
          <template #header>
            <div class="card-header">
              <CardTitle title="基本信息" />
              <el-button size="small" text type="primary" @click="openForm('update')">
                编辑
              </el-button>
            </div>
          </template>
        </UserBasicInfo>
      </el-col>
      <!-- 右上角：账户信息 -->
<!--      <el-col :span="10" class="detail-info-item">
        <el-card class="h-full" shadow="never">
          <template #header>
            <CardTitle title="账户信息" />
          </template>
          <UserAccountInfo :user="user" :wallet="wallet" />
        </el-card>
      </el-col> -->
      <!-- 下边：账户明细 -->
      <!-- TODO ：-->
      <el-card header="账户信息" shadow="never" style="width: 100%; margin-top: 20px">
        <template #header>
          <CardTitle title="账户信息" />
        </template>
        <el-tabs>
		
          <el-tab-pane label="预约记录">
            <UserOrderList :userId="id" />
          </el-tab-pane>
		  <el-tab-pane label="评分记录">
		    <UserScoreList :userId="id" />
		  </el-tab-pane>
		  <el-tab-pane label="用户预约团队">
		    <UserOrderGroupList :userId="id" />
		  </el-tab-pane>
		  <el-tab-pane label="用户预约人">
		    <UserOrderUserList :userId="id" />
		  </el-tab-pane>
		  <el-tab-pane label="收藏文章">
		    <UserFavoriteArticleList :userId="id" />
		  </el-tab-pane>
		  <el-tab-pane label="收藏场馆">
		    <UserFavoriteMuseumList :userId="id" />
		  </el-tab-pane>
		  <el-tab-pane label="收藏赛事">
		    <UserFavoriteMatchList :userId="id" />
		  </el-tab-pane>
		  <el-tab-pane label="文章浏览">
		    <UserHistoryArticleList :userId="id" />
		  </el-tab-pane>
		  <el-tab-pane label="文章评价">
		    <UserScoreArticleList :userId="id" />
		  </el-tab-pane>
		  <el-tab-pane label="场馆浏览">
		    <UserHistoryMuseumList :userId="id" />
		  </el-tab-pane>
		  <el-tab-pane label="赛事浏览">
		    <UserHistoryMatchList :userId="id" />
		  </el-tab-pane>
		  
        </el-tabs>
      </el-card>
    </el-row>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <UserForm ref="formRef" @success="getUserData(id)" />
</template>
<script lang="ts" setup>
// import * as WalletApi from '@/api/pay/wallet/balance'
import * as UserApi from '@/api/member/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import UserForm from '@/views/member/user/UserForm.vue'
import UserAccountInfo from './UserAccountInfo.vue'
import UserBasicInfo from './UserBasicInfo.vue'
import { CardTitle } from '@/components/Card/index'
import { ElMessage } from 'element-plus'

import UserFavoriteArticleList from '@/views/cms/articlefavorite/index.vue'
import UserHistoryArticleList from '@/views/cms/history/index.vue'
import UserScoreArticleList from '@/views/cms/articlescore/index.vue'

defineOptions({ name: 'MemberDetail' })

const loading = ref(true) // 加载中
const user = ref<UserApi.UserVO>({} as UserApi.UserVO)

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string) => {
  formRef.value.open(type, id)
}

/** 获得用户 */
const getUserData = async (id: number) => {
  loading.value = true
  try {
    user.value = await UserApi.getUser(id)
  } finally {
    loading.value = false
  }
}

/** 初始化 */
const { currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const id = route.params.id


onMounted(() => {
  if (!id) {
    ElMessage.warning('参数错误，会员编号不能为空！')
    delView(unref(currentRoute))
    return
  }
  getUserData(id)
})
</script>
<style lang="css" scoped>
.detail-info-item:first-child {
  padding-left: 0 !important;
}

/* first-child 不生效有没有大佬给看下q.q */
.detail-info-item:nth-child(2) {
  padding-right: 0 !important;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
